<template>
   <el-form ref="formRef" :model="form" label-width="auto" style="padding-top: 20px;">
    <el-row>
      <el-col :offset="6" :span="12">
        <el-form-item label="用户名" prop="username" :rules="[{ required: true, trigger: 'change', message: '用户名必填' }]">
          <el-input v-model="form.username" />
        </el-form-item>
      </el-col>
      <el-col :offset="6" :span="12">
        <el-form-item label="老密码" prop="oldPassword" :rules="[{ required: true, trigger: 'change', message: '老密码必填' }]">
          <el-input v-model="form.oldPassword" type="password" />
        </el-form-item>
      </el-col>
      <el-col :offset="6" :span="12">
        <el-form-item label="新密码" prop="newPassword" :rules="[{ required: true, trigger: 'change', message: '新密码必填' }]">
          <el-input v-model="form.newPassword" type="password" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="6" :span="12" style="text-align: center;">
        <el-button type="primary" @click="submit">更新</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { changePassInfo, resetUserPwd } from '@/api/users'
import { userInfo } from '@/store/userInfo'
export default {
  data() {
    return {
      form: {
        username: userInfo.value.username,
        oldPassword: '',
        newPassword: ''
      }
    }
  },
  methods: {
    submit() {
      const res = this.$refs.formRef as any
      res.validate((vali: boolean) => {
        if (!vali) return // 前端校验不通过
        // pass
        // changePassInfo({ username: this.form.username, newPassword: this.form.newPassword, oldPassword: this.form.oldPassword })
        changePassInfo(this.form).then(res => {

        })
      })
    },
    changeInfo() {
      const res = this.$refs.formRef as any
      res.validate((vali: boolean) => {
        if (!vali) return // 前端校验不通过
        resetUserPwd({
          password: this.form.oldPassword,
          username: this.form.username
        }).then(() => {

        })
      })
    }
  }
}
</script>

<style>

</style>
